<template>
    <div class="promotion-page">
      <h1>促销优惠</h1>
      <div class="promotion-info">
        <h2>限时优惠活动</h2>
        <p>欢迎参加我们的限时促销活动！以下是本周的特别优惠：</p>
      </div>
  
      <div class="product-list">
        <div class="product-card" v-for="(product, index) in products" :key="index">
          <h3>{{ product.name }}</h3>
          <p>原价：<span class="original-price">{{ product.originalPrice }} 元</span></p>
          <p>促销价：<span class="promotion-price">{{ product.promotionPrice }} 元</span></p>
          <button @click="addToCart(product)">加入购物车</button>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const products = ref([
    { name: '商品 A', originalPrice: 100, promotionPrice: 80 },
    { name: '商品 B', originalPrice: 150, promotionPrice: 120 },
    { name: '商品 C', originalPrice: 200, promotionPrice: 150 },
    { name: '商品 D', originalPrice: 250, promotionPrice: 200 },
    { name: '商品 E', originalPrice: 300, promotionPrice: 250 },
    { name: '商品 F', originalPrice: 350, promotionPrice: 300 },
    { name: '商品 G', originalPrice: 400, promotionPrice: 350 },
    { name: '商品 H', originalPrice: 450, promotionPrice: 400 },
    { name: '商品 I', originalPrice: 500, promotionPrice: 450 },
    { name: '商品 J', originalPrice: 550, promotionPrice: 500 },
    { name: '商品 K', originalPrice: 600, promotionPrice: 550 },
    { name: '商品 L', originalPrice: 650, promotionPrice: 600 },
    { name: '商品 M', originalPrice: 700, promotionPrice: 650 },
    { name: '商品 N', originalPrice: 750, promotionPrice: 700 },
    { name: '商品 O', originalPrice: 800, promotionPrice: 750 },
    { name: '商品 P', originalPrice: 850, promotionPrice: 800 },
    { name: '商品 Q', originalPrice: 900, promotionPrice: 850 },
    { name: '商品 R', originalPrice: 950, promotionPrice: 900 },
    { name: '商品 S', originalPrice: 1000, promotionPrice: 950 },
    { name: '商品 T', originalPrice: 1050, promotionPrice: 1000 },
    { name: '商品 U', originalPrice: 1100, promotionPrice: 1050 },
    { name: '商品 V', originalPrice: 1150, promotionPrice: 1100 },
    { name: '商品 W', originalPrice: 1200, promotionPrice: 1150 },
    { name: '商品 X', originalPrice: 1250, promotionPrice: 1200 },
    { name: '商品 Y', originalPrice: 1300, promotionPrice: 1250 },
    { name: '商品 Z', originalPrice: 1350, promotionPrice: 1300 },
  ]);
  
  const addToCart = (product) => {
    alert(`${product.name} 已加入购物车！`);
  };
  </script>
  
  <style scoped lang="scss">
  .promotion-page {
    padding: 20px;
    background-color: #f9f9f9;
  
    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 20px;
    }
  
    .promotion-info {
      margin-bottom: 30px;
      padding: 15px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
      h2 {
        color: #1f9a7a;
        margin-bottom: 10px;
      }
  
      p {
        color: #555;
      }
    }
  
    .product-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
    }
  
    .product-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin: 10px;
      width: 200px;
      text-align: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  
      h3 {
        color: #333;
        margin: 10px 0;
      }
  
      .original-price {
        text-decoration: line-through;
        color: #999;
      }
  
      .promotion-price {
        color: #e74c3c;
        font-weight: bold;
      }
  
      button {
        padding: 10px;
        background-color: #1f9a7a;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s;
  
        &:hover {
          background-color: #169a61;
        }
      }
    }
  }
  </style>
  